<template>
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <l-query2 :labelWidth="0" :popoverWidth="240" :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                <template #keyWord >
                    <el-input v-model="queryData.keyWord" :placeholder="$t('请输入查询关键字')"></el-input>
                </template>
                <template #seachDate >
                    <l-date format="yyyy-MM-dd"
                        dateType="daterange"
                        v-model="queryData.seachDate" 
                        :startPlaceholder="$t('开始时间')"
                        :endPlaceholder="$t('结束时间')"
                       >
                    </l-date>
                </template>
            </l-query2>
        </template>
        <template #toolRight >
            <l-tool-btns :hasAdd="false">
            </l-tool-btns>
        </template>
        <l-table ref="mainTable" 
            :loading="tableLoading" 
            :columns="columns" 
            :dataSource="tableData"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"
            @loadPageData="turnTablePage"
            >
            <template v-slot:f_UnitName="scope" >
                <el-button @click="handleRead(scope.row)" size="mini" type="text">{{scope.row.f_UnitName}}</el-button>
            </template>
            <template v-slot:f_CreateDate="scope" >
                {{lr_dateFormat(scope.row.f_CreateDate)}}
            </template>
            <template v-slot:f_State="scope" >
                <el-tag v-if="scope.row.f_State == 1" size="mini" type="warning">{{ $t('未阅') }}</el-tag>
                <el-tag v-else size="mini" type="success">{{$t('已阅')}}</el-tag>
            </template>
        </l-table>

        <wf-audit-form
            ref="form"
            type="look"
            :isRead="true"
            :params="{taskId:taskId}" 
            :isLoadFormData="true" 
            :title="title" 
            :visible.sync="visible"

            @refresh="loadTableData(true)"
            ></wf-audit-form>
    </l-panel>        
</template>

<script>
    const api = window.$api.workflow.process
    export default {
        components: {          
        },
        data() {
            return {
                queryItems:[
                    {prop:'seachDate',span:24},
                    {prop:'keyWord',span:24}
                ],
                queryData:{
                    keyWord:'',
                    seachDate:''
                },
                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'任务',prop:'f_UnitName',minWidth:100,align:'left'},
                    {label:'标题',prop:'f_ProcessTitle',minWidth:100,align:'left'},
                    {label:'状态',prop:'f_State',width:60,align:'center'},
                    {label:'提交人',prop:'f_ProcessUserId',width:200,align:'left',dataType:'fullUser',isNotAutoWrap:true},
                    {label:'时间',prop:'f_CreateDate',width:160,align:'left'}
                ],

                taskId:'',
                title:'',
                visible:false,
            }
        },
        computed: {
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()
            },
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                const queryData = this.$deepClone(this.queryData)
                


                if(queryData.seachDate){
                    const dateList = queryData.seachDate.split(' - ')
                    queryData.startDate = dateList[0]
                    queryData.endDate = dateList[1]
                    queryData.seachDate = null
                }

                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'f_State,t.f_CreateDate DESC'
                const data = await this.$awaitWraper(api.getReadMyPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },
            handleRead(row){
                this.taskId = row.f_Id
                this.title = `${row.f_ProcessTitle}【${row.f_UnitName}】`
                this.visible = true
            }
        }
    }
</script>